<template>
  <t-breadcrumb class="breadcrumb">
    <t-breadcrumbItem>
      <t-icon name="home" />首页
    </t-breadcrumbItem>
    <t-breadcrumbItem>用户管理</t-breadcrumbItem>
  </t-breadcrumb>
  <div class="head">
    <img src="公正.png" alt="">
    <img src="法治.png" alt="">
    <img src="爱国.png" alt="">
    <div class="form">
      <t-form label-width="90px" :data="data.formData" ref="teacherForm" @submit="queryList">
        <t-row>
          <t-col :span="3">
            <t-form-item label="姓名：">
              <t-input placeholder="请输入姓名" v-model="data.formData.username" />
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="班级：">
              <t-select v-model="data.formData.class_id" class="demo-select-base">
                <t-option v-for="(item, index) in classOptions" :key="index" :value="item.value" :label="item.label">
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="类别：">
              <t-select v-model="data.formData.type" class="demo-select-base">
                <t-option v-for="(item, index) in data.typeOptions" :key="index" :value="item.value"
                  :label="item.label">
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label-width="20px">
              <t-button type="submit">查询</t-button>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </div>
  </div>
  <div class="content">
    <t-table :maxHeight="530" row-key="id" :data="table.data" :columns="table.columns" bordered table-content-width="100%"
             :pagination="{ total: table.total }" @PageChange="pageChange" :loading="data.loading">
      <template #type="{ row }">
        <span v-if="row.type === 0">普通学生</span>
        <span v-else-if="row.type === 1">班级委员</span>
        <span v-else-if="row.type === 2">副班长</span>
        <span v-else>班长</span>
      </template>
      <template #operation="{ row }">
        <t-popconfirm theme="danger" content="是否删除该学生?" @Confirm="delStudent(row.id)">
          <t-button theme="danger">删除</t-button>
        </t-popconfirm>
        <t-button style="margin-left: 5px;" @click="updateStudent(row)">修改</t-button>
      </template>
    </t-table>
  </div>
  <UpdateClassDialog ref="updateClass" @callback="queryList" />
</template>
<script setup lang="ts">
import {MessagePlugin, PageInfo} from 'tdesign-vue-next';
import {onMounted, reactive, ref} from 'vue';
import {deleteStudent, queryStudentList} from "../api/Student";
import {queryClass, queryClassList} from "../api/Class";
import UpdateClassDialog from "../components/updateStudentDialog.vue";
const data = reactive({
  formData: {
    class_id: '',
    username: '',
    type: '',
    pageSize: 10,
    current: 1,
  },
  loading: false,
  sexOptions: [
    { label: '全部', value: '' },
    { label: '男', value: '男' },
    { label: '女', value: '女' },
  ],
  typeOptions: [
    { label: '全部', value: '' },
    { label: '普通学生', value: 0 },
    { label: '班级委员', value: 1 },
    { label: '副班长', value: 2 },
    { label: '班长', value: 3 },
  ],
});
interface classOptionType {
  label: string;
  value: number | string;
}
const classOptions = ref<Array<classOptionType>>([]);
const table = reactive({
  data: [],
  total: 0,
  columns: [{
    align: 'center',
    width: 30,
    colKey: 'id',
    title: 'ID',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'username',
    title: '姓名',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'classname',
    title: '班级',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'type',
    title: '类别',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'operation',
    title: '操作',
    fixed: 'left',
  },
  ]
});
// 分页
function pageChange(pageInfo: PageInfo) {
  data.formData.pageSize = pageInfo.pageSize;
  data.formData.current = pageInfo.current;
  queryList();
}
// 查询学生列表
const queryList = async () => {
  const result = await queryStudentList(data.formData);
  if(result) {
    table.data = result.data.studentList;
    table.total = result.data.total;
  }
}
// 请求班级列表API
const queryClassType = async () => {
  const classTypes = await queryClass();
  classOptions.value.push({ label: '全部', value: '' });
  classTypes.data.forEach((item:any, i) => {
    classOptions.value.push({
      label: item.classname,
      value: item.id
    })
  });
}
// 删除学生
const delStudent = async (id:number) => {
  const result = await deleteStudent(id);
  if(result) {
    MessagePlugin.success(result.message);
    queryList();
  }
}
// 修改学生
const updateClass = ref();
interface rowType {
  id: number;
  user_id: number;
  class_id: number;
  username: string;
  classname: string;
  type: number;
}
const updateStudent = (row:rowType) => {
  updateClass.value.open(row);
}
onMounted(()=>{
  queryList();
  queryClassType();
})
</script>
<style lang="less" scoped>
.breadcrumb {
  margin: 10px 0 0 10px;
}

.head {
  width: 100%;
  height: 150px;
  display: flex;

  img {
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  .form {
    flex: 1;
    margin: 10px;
  }
}

.content {
  width: 100%;
  padding: 0 10px;
}
</style>
